<template>
  <div class="app-container">
    <div class="header">
      <div class="title1">
        <i class="el-icon-key"></i><span>多穿穿梭车控制</span>
      </div>
      <div class="backB">
        <img src="@/assets/images/back.png" alt="" @click="goBack" />
      </div>
    </div>
    <!-- <div class="title">多穿穿梭车控制</div> -->
    <div class="roadwayName">
      <div class="roadNameEmpty"></div>
      <div class="roadNameItem">
        <img src="@/assets/images/roadway1.png" alt="" />
      </div>
      <div class="roadNameItem">
        <img src="@/assets/images/roadway2.png" alt="" />
      </div>
      <div class="roadNameItem">
        <img src="@/assets/images/roadway3.png" alt="" />
      </div>
    </div>
    <div class="carContent">
      <div class="floor">
        <div class="floorItem">
          <img src="@/assets/images/floor4.png" alt="" />
        </div>
        <div class="floorItem">
          <img src="@/assets/images/floor3.png" alt="" />
        </div>
        <div class="floorItem">
          <img src="@/assets/images/floor2.png" alt="" />
        </div>
        <div class="floorItem">
          <img src="@/assets/images/floor1.png" alt="" />
        </div>
      </div>
      <div class="roadwayContent">
        <div
          v-for="(item, index) in roadWayData"
          :key="index"
          class="roadItem"
          :style="{
            backgroundImage:
              item.locationLock == 0
                ? 'url(' + abnormalurl + ')'
                : 'url(' + redurl + ')',
            backgroundSize: 'cover' /* 确保背景图像覆盖整个区域 */,
            backgroundPosition: 'center' /* 背景图像居中 */,
          }"
        >
          <div class="locationNo">
            {{ item.locationNo }}
          </div>
          <div class="locationBtn">
            <el-button
              :type="item.locationLock == 0 ? 'danger' : 'success'"
              :icon="item.locationLock == 0 ? 'el-icon-lock' : 'el-icon-unlock'"
              circle
              @click="handleLock(item)"
              >{{ item.locationLock == 0 ? "锁定" : "解锁" }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="roadwayName">
      <div class="roadNameEmpty"></div>
      <div class="roadNameItem">
        <el-button
          type="success"
          icon="el-icon-unlock"
          round
          @click="handleRoadwayunLock(1)"
          >解锁</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-lock"
          round
          @click="handleRoadwayLock(1)"
          >锁定</el-button
        >
      </div>
      <div class="roadNameItem">
        <el-button
          type="success"
          icon="el-icon-unlock"
          round
          @click="handleRoadwayunLock(2)"
          >解锁</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-lock"
          round
          @click="handleRoadwayLock(2)"
          >锁定</el-button
        >
      </div>
      <div class="roadNameItem">
        <el-button
          type="success"
          icon="el-icon-unlock"
          round
          @click="handleRoadwayunLock(3)"
          >解锁</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-lock"
          round
          @click="handleRoadwayLock(3)"
          >锁定</el-button
        >
      </div>
    </div>
    <div class="footer">
      <el-dialog
        title="操作验证"
        :visible.sync="centerDialogVisible"
        width="22%"
        left
        :close-on-click-modal="false"
      >
        <el-form
          :model="passForm"
          status-icon
          :rules="passrules"
          ref="passForm"
          label-width="60px"
          class="demo-ruleForm"
        >
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="passForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit('passForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  listEislock,
  lockCar,
  unlockCar,
  lockroadway,
  unlockroadway,
} from "@/api/system/eislock";
import { getcheckPassword } from "@/api/subSystem/continer";
export default {
  data() {
    var passwordError = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        getcheckPassword(value).then((res) => {
          this.priorityNum = res.msg;
          if (res.msg == "admin") {
            callback();
          } else if (res.msg == "supper") {
            callback();
          } else if (res.msg == "false") {
            callback(new Error("密码错误"));
          }
        });
      }
    };
    return {
      // 密码验证
      centerDialogVisible: false,
      passForm: {
        pass: null,
      },
      passrules: {
        pass: [{ validator: passwordError, trigger: "blur" }],
      },
      redurl: require("@/assets/images/redeislock.png"),
      abnormalurl: require("@/assets/images/greeneislock.png"),
      roadWayData: [],
      locationNo: "",
      locationLock: "",
      // 点击按钮输入密码
      btntouchValue: 0,
      // 解锁巷道
      unlockNum: null,
      // 锁定巷道
      lockNum: null,
    };
  },
  created() {
    this.getEisLockList();
  },
  methods: {
    // 解锁巷道
    handleRoadwayunLock(roadNo) {
      this.centerDialogVisible = true;
      this.passForm.pass = null;
      this.btntouchValue = 2;
      this.unlockNum = roadNo;
      //   unlockroadway({ locationNo: roadNo }).then((res) => {
      //     this.$modal.msgSuccess("巷道解锁成功");
      //     this.getEisLockList();
      //   });
    },
    // 锁定巷道
    handleRoadwayLock(roadNo) {
      this.centerDialogVisible = true;
      this.passForm.pass = null;
      this.btntouchValue = 3;
      this.lockNum = roadNo;
      //   lockroadway({ locationNo: roadNo }).then((res) => {
      //     this.$modal.msgSuccess("巷道锁定成功");
      //     this.getEisLockList();
      //   });
    },
    getEisLockList() {
      listEislock().then((res) => {
        this.roadWayData = res.data;
      });
    },
    // 判断点击锁定或解锁
    handleLock(items) {
      this.locationLock = items.locationLock;
      this.locationNo = items.locationNo;
      this.centerDialogVisible = true;
      this.passForm.pass = null;
      this.btntouchValue = 1;
      console.log(items);
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.btntouchValue == 1) {
            if (this.locationLock == 0) {
              lockCar({ locationNo: this.locationNo }).then((res) => {
                this.$modal.msgSuccess("锁定成功");
                this.getEisLockList();
              });
            } else if (this.locationLock == 1) {
              unlockCar({ locationNo: this.locationNo }).then((res) => {
                this.$modal.msgSuccess("解锁成功");
                this.getEisLockList();
              });
            }
          } else if (this.btntouchValue == 2) {
            unlockroadway({ locationNo: this.unlockNum }).then((res) => {
              this.$modal.msgSuccess("巷道解锁成功");
              this.getEisLockList();
            });
          } else if (this.btntouchValue == 3) {
            lockroadway({ locationNo: this.lockNum }).then((res) => {
              this.$modal.msgSuccess("巷道锁定成功");
              this.getEisLockList();
            });
          }
          this.centerDialogVisible = false;
        }
      });
    },
    goBack() {
      this.$router.push("/subSystem1");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  background: #020202;
  .header {
    margin-top: -10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 220px;
      margin-right: 20px;
    }
    .el-icon-key::before {
      color: #0055ff;
      margin-right: 8px;
    }
    .title1 {
      font-size: 16px;
      // margin-bottom: 15px;
      // color: #808080;
      color: #0055ff;
      width: 150px;
      padding: 5px;
      border-bottom: 1px dotted #0055ff;
    }
    .backB {
      cursor: pointer;

      img {
        width: 20%;
      }
    }
  }
  .carContent {
    width: 100%;
    height: 620px;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    .floor {
      width: 10%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .floorItem {
        height: 150px;
        line-height: 150px;
        width: 126px;
        text-align: center;
        // border-bottom: 1px dashed #558dfa;
        // margin: 0 10px 10px 0;
        img {
          width: 130%;
        }
      }
    }
    .roadwayContent {
      //   width: 90%;
      width: 86%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      .roadItem {
        height: 145px;
        width: 25%;
        // margin: 0 10px 10px 0;
        // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
        border: 1px solid #ddd7d7;
        transition: transform 0.2s; /* 添加过渡效果 */
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .roadItem:hover {
        transform: translateY(-2px); /* 鼠标悬停时轻微上移 */
      }
      .locationNo {
        font-size: 30px;
        color: #0c0c0b;
        width: 30%;
        text-align: center;
        height: 145px;
        line-height: 145px;
        border-right: 2px solid #ffffff;
      }
      .locationBtn {
        width: 70%;
        text-align: center;
        margin-left: 42%;
      }
    }
  }
  .roadwayName {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    .roadNameEmpty {
      width: 10%;
    }
    .roadNameItem {
      width: 30%;
      text-align: center;
      img {
        width: 36%;
      }
    }
  }
}
</style>